<template>
	<view class="product">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<scroll-view scroll-y="true" class="scroll-view" @scroll="onScroll" :scroll-into-view="scrollToEle"
			scroll-with-animation>
			<!-- <u-swiper :list="goods.images" height="750" bg-color="#fff" indicator-pos="bottomRight" mode="number"
				:id="'scrollTo_' + 0"></u-swiper> -->
			<gyd-swiper :list="goods.images"></gyd-swiper>

			<view class="product-base">
				<view class="name">
					{{goods.name}}
				</view>
				<view class="price">
					<text>￥{{goods.sale_price}}</text>
					<!-- <text style="">￥{{goods.market_price}}原价</text> -->
				</view>
				<!--view class="discount" v-if="goods.points > 0">
					<u-tag text="抵扣" type="error" mode="dark" size="mini"></u-tag>
					<text class="points">{{goods.points}}优享点</text>
				</view-->

				<!-- #ifdef APP -->
				<view class="share">
					<uni-icons type="paperplane-filled" size="30" @click="onShare('WXSceneSession')"></uni-icons>
					<uni-icons type="pyq" size="30" @click="onShare('WXSceneTimeline')"></uni-icons>
				</view>
				<!-- #endif -->

				<view>
					<uni-grid :column="3" :showBorder="false" :square="false">
						<uni-grid-item>库存：{{goods.stock}}</uni-grid-item>
						<uni-grid-item>销售量：{{goods.sales_sum}}</uni-grid-item>
						<uni-grid-item>好评：{{ goods.review_rate }}% </uni-grid-item>
					</uni-grid>
				</view>
			</view>

			<view class="product-coupon" v-if="couponList.length>0">
				<view class="hd">优惠</view>
				<view class="bd">
					<view class="item" v-for="(item,index) in couponList" :key="index">{{item.name}}</view>
				</view>
				<!-- <u-icon name="arrow-right" color="#606266" size="28"></u-icon> -->
			</view>

			<!--收货地址-->
			<view class="delivery-address">
				<view class="card address" v-if="address">
					<uni-icons type="location-filled" size="32" color="#125cd7"></uni-icons>
					<view class="info">
						<view class="user">
							<text class="name">{{address.consignee}}</text>
							{{address.mobile}}
						</view>
						<view class="area">
							{{address.format_address}}
						</view>
					</view>
					<view class="arrow" @click="pageRoute('/userPages/address/address?order=1')">切换<uni-icons
							type="right" size="24" color="#c2c2c2"></uni-icons></view>
				</view>

				<view class="card address" style="width:100%;" v-if="!address">
					<uni-icons type="location-filled" size="32" color="#ddd"></uni-icons>
					<view class="info" style="display: flex;justify-content: space-between;">
						<view class="user">
							<text class="name">请添加地址</text>
						</view>
						<view class="arrow" @click="pageRoute('/userPages/address/address?order=1')">添加<uni-icons
								type="right" size="24" color="#c2c2c2"></uni-icons></view>
					</view>
				</view>
			</view>

			<!-- <view class="product-intro">
				<view class="custom-title">商品简介</view>
				<view class="bd">
					<view class="item">规格:15L</view>
					<view class="item">单位:桶</view>
					<view class="item">重量:6800g</view>
					<view class="item">品牌:{{goods.brand.name}}</view>
				</view>
			</view> -->

			<view class="product-evaluate" :id="'scrollTo_' + 1">
				<view class="evaluate-title" @click="pageRoute('/pages/product/more-evaluate?goods_id=' + goods.id)">
					<view class="title">评价</view>
					<view class="arrow"><uni-icons type="right" size="24" color="#c2c2c2"></uni-icons></view>
				</view>
				<view class="evaluate-content" v-if="evaluateList.length>0">
					<!-- <base-evaluate :evaluate-info="item" v-for="(item, index) in evaluateList" :key="index"></base-evaluate> -->
				</view>
			</view>

			<view class="product-detail" :id="'scrollTo_' + 2" v-if="goods.content">
				<!-- #ifdef H5 || APP -->
				<view class="content" v-html="goods.content"></view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<rich-text :nodes="goods.content"></rich-text>
				<!-- #endif -->
			</view>
		</scroll-view>

		<view class="tool-bar">
			<view class="btn-group">
				<button class="btn" @click="buyNow()" type="warning" shape="circle"
					:style="{width:'100%',background:themeColor.theme,color:'#fff'}">立即购买</button>
			</view>
		</view>

		<water-sku ref="skuShow" :goods="goods"></water-sku>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const skuShow = ref(null);

	const state = reactive({
		title: '产品详情',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		goods_id: 0,
		goods: {},
		scrollTop: 0,
		scrollToEle: 'scrollTo_' + 0,
		address: null,
		address_id: 0,
		couponList: [],
		evaluateList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('goods_id')) {
			console.log('传递参数', opt.goods_id);
		}
		initData();
		getAddressInfo();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getDetail();
		getCoupon();
	}

	function getDetail() {
		console.log('商品详情', state.goods_id);
		state.goods = {
			id: 2,
			name: '云南山泉16.9L',
			logo: state.imgHost + '/uploads/202508/8dced3a2fa664b66bf41163d850a5add.jpg',
			images: [{
				id: 1,
				title: '',
				image: state.imgHost + '/uploads/202508/file8abfb845c2964d0e059e90cff521a3b64648.jpg',
				link: '#',
			}, {
				id: 2,
				title: '',
				image: state.imgHost + '/uploads/202508/file682ed776a9d247ca390d79dd8ad39f8d7758.jpg',
				link: '#',
			}],
			sales_sum: 271,
			review_rate: 100,
			sale_price: '15.00',
			market_price: '10.00',
			stock: 100,
			goods_spec: [{
				id: 1,
				title: '1桶',
				price: '15.00',
			}, {
				id: 2,
				title: '10桶',
				price: '145.00',
			}, {
				id: 3,
				title: '20桶',
				price: '290.00',
			}, {
				id: 4,
				title: '50桶',
				price: '720.00',
			}, {
				id: 5,
				title: '100桶',
				price: '1400.00',
			}, {
				id: 6,
				title: '200桶',
				price: '2700.00',
			}],
			marketing: [],
			store_name: '云海水站',
			content: '',
		};
		state.sale_price = state.goods.sale_price;
		state.max = state.goods.stock;
	}

	function getAddressInfo() {
		state.address = {
			id: 1,
			consignee: '王先生',
			mobile: '15825258992',
			format_address: '云南省昆明市五华区丰宁街道金鼎科技园18号平台A座101'
		};
		state.address_id = 1;
	}

	function getCoupon() {
		console.log('获取优惠券');
	}

	function onChange(index) {
		state.scrollToEle = `scrollTo_${index}`;
	}

	function buyNow() {
		skuShow.value.open();
	}


	function onScroll(e) {
		state.scrollTop = e.detail.scrollTop;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		goods_id,
		goods,
		scrollTop,
		scrollToEle,
		address,
		address_id,
		couponList,
		evaluateList,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		overflow: hidden;
		height: 100%;
		padding-bottom: 120rpx;
	}

	.product {
		display: flex;
		flex-direction: column;

		.scroll-view {
			overflow: hidden;
			flex: 1;

			.product-base {
				padding: $m24;
				background-color: $u-bg-reverse-color;

				.price {
					text {
						margin: 0 $m12 0 0;

						&:nth-child(1) {
							font-size: $font-48;
							font-weight: bold;
							color: #fa3534;

							&::after {
								// content: '会员价';
								font-size: $font-24;
								font-weight: normal;
							}
						}

						&:nth-child(2) {
							margin-left: $m8;
							color: $u-tips-color;
						}
					}
				}

				.discount {
					display: flex;
					align-items: center;

					text {
						margin-left: $m8;
						color: red;
						font-weight: bold;
					}
				}

				.name {
					font-size: $font-32;
					font-weight: bold;
					color: $u-main-color;
				}

				.vip {
					@include f-between;

					.label {
						flex: 1;

						text {
							color: #fa3534;
						}
					}

					.more {
						text {
							color: #fa3534;
							font-size: $font-24;
						}
					}
				}
			}

			.product-coupon {
				display: flex;
				background: #fff;
				padding: $m16;

				.hd {
					width: 80rpx;
					line-height: 50rpx;
				}

				.bd {
					flex: 1;
					display: flex;

					.item {
						height: 50rpx;
						padding: 0 20rpx;
						margin: 0 $m12 0 0;
						text-align: center;
						line-height: 48rpx;
						border: #fa3534 solid 1rpx;
						border-radius: 30rpx;
						box-sizing: border-box;
						font-size: $font-26;
						color: #fa3534;
					}
				}
			}

			// 配送地址
			.delivery-address {
				display: flex;
				align-items: center;
				padding: $m16 $m16;
				margin: $m24 0;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;

				.card {
					border-radius: $radius-12;
					display: block;

					&.address {
						@include f-between;

						.info {
							flex: 1;
							margin-left: $m24;
							align-items: center;

							.user {
								color: $u-tips-color;

								.name {
									margin-right: $m24;
									font-size: $font-30;
									color: $u-main-color;
									font-weight: 500;
								}
							}

							.area {
								color: $u-tips-color;
							}
						}

						.arrow {
							// width: 120rpx;
							text-align: right;
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.product-evaluate {
				background: #fff;
				padding: $m16 $m24;
				margin-top: $m24;
				margin-bottom: $m24;
				border-radius: 16rpx;

				.evaluate-title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
				}

				.evaluate-content {
					border-bottom: 1rpx solid #f7f7f9;
				}
			}

			.product-detail {
				margin: $m24 0 $m24;
				padding: $m24;
				background-color: $u-bg-reverse-color;
			}
		}

		.tool-bar {
			position: fixed;
			left: 0rpx;
			bottom: calc(var(--window-bottom));
			right: 0rpx;
			z-index: 9;
			overflow: hidden;
			@include f-between;
			height: 98rpx;
			padding: 0 $m24;
			background-color: $u-bg-reverse-color;

			.btn-group {
				flex: 1;
				display: flex;

				.btn {
					width: 100%;
					border-radius: 100rpx;
				}
			}
		}
	}
</style>